<template>
  <!--用在独立的一行-->
<!--  <div style="background-color: #f8f8f8;box-sizing: border-box;">
    <el-breadcrumb separator-class="el-icon-arrow-right"   style="line-height: 50px;padding-left: 20px;">
      <template v-for="(item, index) in routeMatched" :key="index">
        &lt;!&ndash;第一个显示链接，用于跳转后台主目录；其他都不显示链接&ndash;&gt;
        <el-breadcrumb-item v-if="index==0" :to="{path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>{{item.meta.title}}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>-->
  <!--作为内联元素使用-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <template v-for="(item, index) in routeMatched" :key="index">
      <!--第一个显示链接，用于跳转后台主目录；其他都不显示链接-->
      <el-breadcrumb-item v-if="index==0" :to="{path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
      <el-breadcrumb-item v-else>{{item.meta.title}}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';
import { computed } from 'vue';

const store = useStore();
const routeMatched = computed(() => store.state.routeMatched);
</script>

<style scoped>

</style>
